<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登陆</title>
    <link rel="stylesheet" th:href="@{/common/layui/css/layui.css}">
    <script th:src="@{/common/js/jquery.min.js}" type="text/javascript"></script>
</head>
<body style="width: 100%;height: 100%; margin: 0;padding: 0;
        background-image:url('/image/background.jpg')">
<div style=" position: relative; top:200px; margin: auto;height: 440px; width: 400px; border: 1px solid; background-color: #c7ddef; opacity:0.9">
    <p style=" position: absolute; padding-left: 105px; padding-top: 20px; font-size: 20px;
        letter-spacing:10px; font-family: 黑体" >注册拍卖网</p>
    <div style="width: 95%;height: 100%;padding-top: 70px; border-color: #F2F2F2;">
        <form class="layui-form" action="" style="height:95%;width: 100%; ">
            <!--<div class="layui-input-block">-->
            <!--<input class="layui-input"  type="text" name="uname" lay-verity="required" placeholder="请输入用户名" autocomplete="off"/>-->
            <!--</div>-->
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input class="layui-input"  type="text" id="uname" name="uname" required lay-verity="required"
                           placeholder="请输入用户名" onblur="checkUname()" autocomplete="off"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">个人姓名</label>
                <div class="layui-input-block">
                    <input class="layui-input"  type="text" id="xingming" name="xingming"
                           required lay-verity="required" placeholder="请输入个人姓名"
                           autocomplete="off"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" id="password" name="password" required
                           lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" id="pswd" name="pswd" required lay-verify="required"
                           placeholder="请再次输入密码" autocomplete="off" class="layui-input"
                            onblur="checkPassword()">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input type="text" id="iphone" name="iphone" required lay-verify="required" onblur="checkIphone()"
                         maxlength="11" minlength="11" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址</label>
                <div class="layui-input-block">
                    <input type="text" id="dizhi" name="dizhi" required lay-verify="required" onblur="checkdhizhi()"
                           maxlength="11" minlength="11" placeholder="请输入地址" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" onclick="toLogin()" class="layui-btn layui-btn-primary">去登录</button>
                    <button type="button" onclick="register()" class="layui-btn">立即注册</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>

<script type="text/javascript">
    function register(){
        var uname = $("#uname").val();
        var xingming = $("#xingming").val();
        var password = $("#password").val();
        var iphone = $("#iphone").val();
        var dizhi = $("#dizhi").val();
        // var dhizhi = $("#dhizhi").val();
        if(uname == undefined || uname == "" || uname == null){
            alert("用户名不能为空！！！");
            return;
        }
        if(xingming == undefined || xingming == "" || xingming == null){
            alert("姓名不能为空！！！");
            return;
        }
        if(password == undefined || password == "" || password == null){
            alert("密码不能为空！！！");
            return;
        }
        if(iphone == undefined || iphone == "" || iphone == null){
            alert("手机号码不能为空！！！");
            return;
        }
        if(dizhi == undefined || dizhi == "" || dizhi == null){
            alert("用户地址不能为空！！！");
            return;
        }


        $.ajax({
            type:"post",
            url:"/user/register",
            data:"uname="+uname
                +"&password="+password
                +"&xingming="+xingming
                +"&iphone="+iphone
                +"&dizhi="+dizhi
                ,
            dataType: "json",
            // contentType: "application/json; charset=utf-8",
            success:function(data) {
                if(!data.success){
                    alert("注册失败，请核实信息或联系管理员！！！");
                    return;
                }

                alert("注册成功，请使用用户名密码登录");
                window.location.href="/user/toLogin"

            },
            error: function(){
                alert("注册失败，请核实信息或联系管理员！！！");

            }

        });
    }

    function checkIphone() {
        var iphone = $("#iphone").val();
        if(iphone == undefined || iphone == "" || iphone == null){
            return;
        }

        var myreg = /^1[3458]\d{9}$/;
        if(!myreg.exec(iphone)){
            $("#iphone").val("");
            alert('请输入正确的手机号');
        }
    }

    function checkUname() {
        var uname = $("#uname").val();
        if(uname == undefined || uname == "" || uname == null){
            return;
        }
        $.ajax({
            type:"post",
            url:"/user/checkUname",
            data:"uname="+uname,
            dataType: "json",
            // contentType: "application/json; charset=utf-8",
            success:function(data) {
                if(!data.success){
                    var uname = $("#uname").val("");
                    alert("用户名已存在，请重新输入用户名！！！");
                    return;
                }
            }
        });
    }

    function checkPassword(){
        var pswd = $("#pswd").val();
        if(pswd == undefined || pswd == "" || pswd == null){
            return;
        }
        var password = $("#password").val();
        if(password == undefined || password == "" || password == null){
            return;
        }
        if(pswd != password){
            alert("两次输入的密码不一致，请重新输入！！！");
            $("#pswd").val("");
        }
    }
    function toLogin() {
        window.location.href="/user/toLogin";

    }
</script>
</html>